<template>
  <section v-loading="loading">
    <el-button size="mini" @click="addReportModel">增加报告模块</el-button>
    <baseModel></baseModel>
    <el-dialog v-if="selModules" :visible.sync="showSelModulesDialog">
      <sel-report-model :selModules="selModules" :currReport="currReport"></sel-report-model>
    </el-dialog>
    <el-tabs v-model="clickTab" v-if="currReport" @tab-click="handleClick" >
      <el-tab-pane v-for="item in currReport.reportItems" :label="item.reportModule.title" :name="item.reportModule.code" :key="item.id">
        <div v-if="clickTab === 'No.1'&& item.reportModule.code === 'No.1'">
          <No1 :item="item" :report="currReport" v-on:save="savePage(item)" v-on:del="delReportItemBtn" v-on:finish="finishReportItemBtn(item)"> </No1>
        </div>
        <div v-else-if="clickTab === 'No.2' && item.reportModule.code === 'No.2'">
          <No2 :item="item" :report="currReport" v-on:save="savePage(item)" v-on:del="delReportItemBtn(item)" v-on:finish="finishReportItemBtn(item)"> </No2>
        </div>
        <div v-else-if="clickTab == 'No.3' && item.reportModule.code === 'No.3'">
          <No3 :item="item" v-on:save="savePage(item)" v-on:del="delReportItemBtn(item)" v-on:finish="finishReportItemBtn(item)"></No3>
        </div>
        <div v-else-if="clickTab == 'No.4' && item.reportModule.code === 'No.4'">
          <No4 :item="item" v-on:save="savePage(item)" v-on:del="delReportItemBtn(item)" v-on:finish="finishReportItemBtn(item)"></No4>
        </div>
        <div v-else-if="clickTab == 'No.5' && item.reportModule.code === 'No.5'">
          <No5 :item="item" v-on:save="savePage(item)" v-on:del="delReportItemBtn(item)" v-on:finish="finishReportItemBtn(item)"></No5>
        </div>
        <div v-else-if="clickTab == 'No.6' && item.reportModule.code === 'No.6'">
          <No6 :item="item" :currReport="currReport" v-on:save="savePage(item)" v-on:del="delReportItemBtn(item)" v-on:finish="finishReportItemBtn(item)"></No6>
        </div>
        <div v-else-if="clickTab == 'No.7' && item.reportModule.code === 'No.7'">
          <No7 :item="item" v-on:save="savePage(item)" v-on:del="delReportItemBtn(item)" v-on:finish="finishReportItemBtn(item)"></No7>
        </div>
        <div v-else-if="clickTab == 'No.8' && item.reportModule.code === 'No.8'">
          <No8 :item="item" v-on:save="savePage(item)" v-on:del="delReportItemBtn(item)" v-on:finish="finishReportItemBtn(item)"></No8>
        </div>
        <div v-else-if="clickTab == 'No.9' && item.reportModule.code === 'No.9'">
          <No9 :currReport="currReport" :item="item" v-on:save="savePage(item)"  v-on:del="delReportItemBtn(item)" v-on:finish="finishReportItemBtn(item)"></No9>
        </div>
        <div v-else-if="clickTab == 'No.10' && item.reportModule.code === 'No.10'">
          <No10 :currReport="currReport" :item="item" v-on:save="savePage(item)"  v-on:del="delReportItemBtn(item)" v-on:finish="finishReportItemBtn(item)"></No10>
        </div>
        <div v-else-if="clickTab == 'No.11' && item.reportModule.code === 'No.11'">
          <No11 :currReport="currReport" :item="item" v-on:save="savePage(item)"  v-on:del="delReportItemBtn(item)" v-on:finish="finishReportItemBtn(item)"></No11>
        </div>
        <div v-else-if="clickTab === 'base' && item.reportModule.code === 'base'">
          <baseModel :currReport="currReport" :item="item" v-on:save="savePage(item)" v-on:del="delReportItemBtn(item)" v-on:finish="finishReportItemBtn(item)"></baseModel>
        </div>
      </el-tab-pane>
    </el-tabs>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import DateFormat from '@/common/date-formater'
  import errHandler from '@/assets/errHandler.js'
  import selReportModel from './selReportModel'
  import No1 from './reportModule/No1'
  import No2 from './reportModule/No2'
  import No3 from './reportModule/No3'
  import No4 from './reportModule/No4'
  import No5 from './reportModule/No5'
  import No6 from './reportModule/No6'
  import No7 from './reportModule/No7'
  import No8 from './reportModule/No8'
  import No9 from './reportModule/No9'
  import No10 from './reportModule/No10'
  import No11 from './reportModule/No11'
  import baseModel from './reportModule/baseModel'
  export default {
    name: "report",
    components: {No1,No2,No3,No4,No5,No6,No7,No8,No9,No10,No11,baseModel,selReportModel},
    data() {
      return {
        clickTab:'',
        importMessage:'',
        importPercentage:0,
        showDialog:false,
        // selModules:[],
        moduleList:null,
        currExamine:null,
        reportDetail:{},
        loading:false,
        currReport:null,
        physicalList:null,
        selModules:null,
        showSelModulesDialog:false
      }
    },
    watch: {
      clickTab(nv,ov){
      },
    },
    created(){
      //获取下当前报告
      this.getReport(this.$route.params.reportId)
    },
    computed:{
      ...mapGetters(['department']),
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      addReportModel(){
        this.showSelModulesDialog=true
        console.log(this.currReport)
        let tmp=[]
        this.currReport.reportItems.forEach(ri=>{
          tmp.push(ri.reportModule.id)
        })
        this.selModules=tmp
        console.log(this.selModules)
      },
      selPhysical(vals,id){
        let tmp = this.physicalList.find(p=>p.id===id)
        vals.forEach(v=>{
          for(let key in tmp){
            if(key === v.code){
              v.val=tmp[key]
            }
          }
        })
      },
      handleClick(t){
        console.log(this.clickTab)
      },
      getReport(id){
        this.fetch({name:"getReport",data:{id}})
          .then(res=>{
            console.log(res)
            this.currReport=res
            // this.clickTab = res.reportItems[0].reportModule.code
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      savePage(item){
        console.log(item)
        this.loading=true
        let data={id:item.id,data:JSON.stringify(item.data)}
        // console.log(data)
        this.saveReportItem(data)
      },
      saveReportItem(data){
        this.fetch({name:"saveReportItem",data,method:'post'})
          .then(res=>{
            this.loading=false
            this.$message({
              type: 'success',
              message: '保存成功!'
            });
            console.log(res)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      delReportItemBtn(item){
        console.log('确定删除么')
        this.$confirm('此操作将永久删除该报告项, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading=true
          this.delReportItem(item.id)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
        console.log(item)
      },
      delReportItem(id){
        this.fetch({name:"delReportItem",data:{id}})
          .then(res=>{
            this.loading=false
            console.log(this.currReport.reportItems)
            let index =this.currReport.reportItems.findIndex(i=>i.id === id)
            if(index>=0){
              this.currReport.reportItems.splice(index,1)
              this.clickTab=this.currReport.reportItems[index===0?0:index-1].reportModule.code
            }
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          })
          .catch(err=>{
            this.loading=false
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      finishReportItemBtn(item){
        this.$confirm('此操作将完成报告项，无法编辑, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading=true
          this.finishReportItem(item)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消完成'
          });
        });
        console.log(item)
      },
      finishReportItem(item){
        console.log(item)
        this.fetch({name:"finishReportItem",data:{id:item.id}})
          .then(res=>{
            this.loading=false
            console.log(res)
            item.state=res.state
            this.$message({
              type: 'success',
              message: '完成报告项!'
            });
          })
          .catch(err=>{
            this.loading=false
            console.log(err)
            errHandler.handle(this,err)
          })
      }
    }
  }
</script>

<style scoped>

</style>
